<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
<meta name="format-detection" content="telephone=no" /> 
<link rel="shortcut icon" href="images/logo.ico" />
<title>闪度生活</title>
<meta name="keywords" content=" " />
<meta name="description" content=" " />


<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.1.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/iosSelect.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script>
        var _hmt = _hmt || [];
        (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?b25bf95dd99f58452db28b1e99a1a46f";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
        })();
</script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/easing.js"></script>
<script src="js/swiper-3.4.1.min.js"></script>
<script src="js/index.js"></script>
<script src="js/main.js"></script>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/axios-config.js"></script>
<script src="./js/js.cookie.js"></script>
<script src="./js/utils.js"></script>

<style>
  .pinglun1_show{
    display: block;
  }
  .lianxi_show{
    display: block;
  }
  .pinglun1_show_con{
    padding:0;
  }
  .pinglun1_show_con h5{
    text-align: center;
    font-size: 0.16rem;
    font-weight: bold;
    background: #eeedf3;
    margin: 0;
    padding: 0.24rem 0 0.16rem;
    position: relative;
    color:#222;
  }
  .pinglun1_show_con h4{
    text-align: center;
    font-size: 0.16rem;
    font-weight: bold;
    margin: 0;
    padding: 0.24rem 0.24rem 0.1rem;
    position: relative;
    color: #222;
    text-align: left;
  }
  .pinglun1_show_con h5 img{
    position: absolute;
    top: 0.08rem;
    right: 0.08rem;
  }
  .pinglun1_show_con_f1 {
    position: relative;
    text-align: left;
    padding: 0.16rem 0.18rem;
  }
  .pinglun1_show_con_f4 {
    position: relative;
    text-align: right;
    padding: 0.16rem 0.18rem;
  }
  .pinglun1_show_con_f1_left{
    float:left;
    width:45%;
  }
  .pinglun1_show_con_f1_left img{
    margin-right:0.12rem;
    vertical-align: middle;
  }
  .pinglun1_show_con_f1_left span{
    font-size:0.14rem;
    color:#222;
    vertical-align: middle;
    font-weight: bold;
  }
  .pinglun1_show_con_f1_right span{
    font-size: 0.14rem;
    color: #9b9b9b;
    vertical-align: middle;
    display: block;
    height: 0.25rem;
    line-height: 0.25rem;
  }
  .pinglun1_show_con_f2{
    border-bottom: 0.1rem solid #eeedf3;
  }
  .pinglun1_show_con_f3{
    border-bottom: 1px solid #ebebeb;
  }
  .pinglun1_show_con_btn{
    height:0.56rem;
    line-height: 0.56rem;
    width:100%;
    background:#20b7fe;
    color:#ff0000;
    font-size:0.16rem;
    text-align: center;
    font-weight: 600;
  }
</style>

</head>

<body>

<div id="app" v-cloak>

<div class="pinglun1_show" v-show="flag1">
    <div class="pinglun1_show_bg"></div>
    <div class="pinglun1_show_con">
        <h5>选择支付方式 <img src="images/order_sure_cha.png" alt="" width="25" class="zhifu_close" @click="hideZhifu()"> </h5>
        <div class="pinglun1_show_con_f1 clearfix pinglun1_show_con_f2" @click="selectZhifu(false)">
            <div class="pinglun1_show_con_f1_left">
              <img src="images/order_sure_1.jpg" alt="" width="16" v-show="flag2">
              <img src="images/order_sure_2.jpg" alt="" width="16" v-show="!flag2">
              <img src="images/order_sure_yue.jpg" alt="" width="25">
              <span>余额</span>
            </div>
            <div class="pinglun1_show_con_f1_right">
              <span>余额:{{wallet.wallet}}</span>
            </div>
        </div>
        <div class="pinglun1_show_con_f1 clearfix pinglun1_show_con_f3" @click="selectZhifu(true)">
            <div class="pinglun1_show_con_f1_left">
              <img src="images/order_sure_1.jpg" alt="" width="16" v-show="!flag2">
              <img src="images/order_sure_2.jpg" alt="" width="16" v-show="flag2">
              <img src="images/order_sure_weixin.jpg" alt="" width="25">
              <span>微信</span>
            </div>
        </div>
        <div class="pinglun1_show_con_btn" @click="sureZhifu()">确认支付</div>
    </div>
</div>

<!--  / header  -->
<div class="header_longevity">
        <div class="header_map_longevity">   
            <img src="images/jiantou.png" alt="">
            <span>返回</span>
        </div>
        <div class="logo_longevity">行程介绍</div>  
</div>
<!--  / header  -->
<div class="energetic">
        <div class="energetic1">
                    <ul>
                        <li class="energetic1-content">
                            <div>
                                <div class="energetic1-content-left">
                                    <img :src="energetic_fitnessDetail.logo_pic" alt="" class="img3">
                                </div>
                                <div class="energetic1-content-right">
                                    <p class="energetic1-content-text1">{{energetic_fitnessDetail.tourist_name}}</p>
                                    <p class="energetic1-content-text2">
                                         {{energetic_fitnessDetail.tourist_details}}
                                    </p>
                                </div>
                                <table style="clear:both;"></table>
                            </div> 
                            <div class="energetic1-content-text3"><span>￥<i>{{energetic_fitnessDetail.price}}.00</i></span>/人</div>  
                        </li>                  
                    </ul>
        </div>
        <div class="energetic2"></div>
        <div class="energetic3">
            <div class="energetic3-list clearfix">
                    <span class="energetic3-list-left">参与人数</span>
                    <div class="energetic3-list-right">
                        <input type="text" placeholder="请输入人数" v-model="num1">
                    </div>
            </div>
            <div class="energetic3-list clearfix">
                    <span class="energetic3-list-left">参与日期</span>
                    <div class="energetic3-list-right">
                        <span>                            
                             <div class="form-item item-line service_inner1_list1" id="selectDate">                    
                                <div class="pc-box">                     
                                    <span data-year="" data-month="" data-date="" id="showDate">请选择</span>  
                                </div>             
                            </div>
                        </span>
                        <img src="images/right-1.png" alt="">
                    </div>
            </div>
            <div class="energetic3-list clearfix">
                    <span class="energetic3-list-left">您的姓名</span>
                    <div class="energetic3-list-right">
                        <input type="text" placeholder="请输入姓名" v-model="name1">
                    </div>
            </div>
            <div class="energetic3-list clearfix">
                    <span class="energetic3-list-left">您的电话</span>
                    <div class="energetic3-list-right">
                        <input type="text" placeholder="请输入电话" v-model="telephone1">
                    </div>
            </div>
            <div class="energetic4"></div>
            <div class="energetic3-list clearfix">
                    <span class="energetic3-list-left">备注说明</span>
                    <div class="energetic3-list-right">
                        <span>60个字符以内</span>
                    </div>
            </div>
            <input type="text" placeholder="请输入备注内容(选填)" class="input-text" v-model="remark1">
        </div>        
</div>
<!--  / footer  -->
<div class="footer2">
    <span>合计 <i> ￥{{energetic_fitnessDetail.price*num1}}.00</i></span>
    <button @click="goZhifu">预约支付</button> 
</div> 
<!--  / footer  -->

</div>

</body>

<script src="js/zepto.js"></script>
<script src="js/iosSelect.js"></script>
<script src="js/areaData_v2.js"></script>
<script type="text/javascript">
    
</script>

<script>
$(window).ready(function(){

    var vm = new Vue({
        el:"#app",
        data(){
          return{
            energetic_fitnessDetail:[],
            num1:'',
            name1:'',
            handler1:'',
            telephone1:'',
            remark1:'',
            flag1:false,
            flag2:false,
            OrderNo:'',
            wallet:''
          }
        },
        created:function(){
          var $this = this;
          $this.getTourItinerary(); 
          $this.getWallet();                                         
         },
        mounted:function(){
          timeSelect();
        },
        methods:{
            //预约服务
            getTourItinerary:function(){
                var $this = this;
                const data = {
                   tourist_id:getCookie("touristId"),
                }
                Axios.post(window.Url.energetic_fitnessDetail,data).then((res) => {
                  
                  if(res.result == 1){
                    $this.energetic_fitnessDetail = res.info.tourist;   
                               
                  }else
                  {
                    console.log("行程详情介绍:"+res.info);
                  }
                  
                }).catch((err) => {
                  console.log("行程详情介绍:"+err);
                })
              
            },
            //生成活力订单
            goZhifu:function(){
                var $this = this;
                if ($this.telephone1 == '' || !/^[1][3,4,5,6,7,8][0-9]{9}$/.test($this.telephone1)) {
                       alert('请输入正确的电话号码！')
                       return
                }
                const data = {
                   tourist_id:getCookie("touristId"),
                   num:$this.num1,
                   name:$this.name1,
                   handler:$this.handler1,
                   telephone:$this.telephone1,
                   remark:$this.remark1,
                }
                Axios.post(window.Url.vitality_order,data).then((res) => {
                  
                  if(res.result == 1){
                    // console.log("chenggong");  
                    // alert("预约成功");
                    $this.flag1=true;
                    $this.OrderNo=res.info;
                                                  
                  }else
                  {
                    console.log("预约服务:"+res.info);
                    alert("预约服务:"+res.info);
                  }
                  
                }).catch((err) => {
                  console.log("预约服务:"+err);
                })
            },

            //支付订单弹出框隐藏
            hideZhifu:function(){
                $this=this;
                $this.flag1=false;
            },

            //选择支付方式
            selectZhifu:function(state){
                $this=this;
                $this.flag2=state;                       
            },

            //获取钱包余额
            getWallet:function(){
                $this=this;
                const data = {
                      
                }       
                Axios.post(window.Url.Ucenter_wallet,data).then((res) => {              
                  if(res.result == 1){  
                    // alert("获取钱包余额成功");
                    $this.wallet=res.info.wallet;                                             
                  }else
                  {
                    console.log("获取钱包余额失败:"+res.info);
                  }
                  
                }).catch((err) => {
                  console.log("获取钱包余额失败:"+err);
                })
            },

            //余额及微信支付
            sureZhifu:function(){
                $this=this;
                if(!$this.flag2){

                  const data = {
                      orderno:$this.OrderNo,
                      type:3,
                  }

                  Axios.post(window.Url.tuanOrder_alipay,data).then((res) => {              
                    if(res.result == 1){  
                      // alert("余额支付成功");
                      $this.flag1=false;
                      window.location.href="orderList.html"; 
                                                       
                    }else
                    {
                      console.log("余额支付失败:"+res.info);
                    }
                    
                  }).catch((err) => {
                    console.log("余额支付失败:"+err);
                  })

                }else if($this.flag2){
                    const data = {
                      orderno:$this.OrderNo,
                      type:3,
                      is_wxin:1
                    }

                    Axios.post(window.Url.order_WeixinPay,data).then((res) => {              
                        if(res.result == 1){  
                            // alert("res.info");
                            sessionStorage.setItem('weixins', JSON.stringify(res.jsApiParameters));
                            sessionStorage.setItem('error_url', "user.html");
                            sessionStorage.setItem('success_url', "orderList.html");
                            // setCookie("weixins",res.jsApiParameters);
                            // setCookie("error_url","orderList.html");
                            // setCookie("success_url","orderList.html");
                            // window.wxinPay.appId = res.jsApiParameters.appId;
                            // window.wxinPay.timeStamp = res.jsApiParameters.timeStamp;
                            // window.wxinPay.nonceStr = res.jsApiParameters.nonceStr;
                            // window.wxinPay.package = res.jsApiParameters.package;
                            // window.wxinPay.signType = res.jsApiParameters.signType;
                            // window.wxinPay.paySign = res.jsApiParameters.paySign;
                            // window.wxinPay.error_url = 'orderList.html';
                            // window.wxinPay.success_url = 'orderList.html';
                            window.location.href = 'wxpay.html';
                            // $this.flag1=false;
                            // location.reload();                                                           
                        }else
                        {
                          console.log("微信支付失败:"+res.info);
                        }
                        
                    }).catch((err) => {
                        console.log("微信支付失败:"+err);
                    })

                }
            },
         
        }

    })
function timeSelect(){
    var selectDateDom = $('#selectDate');
    var showDateDom = $('#showDate');

    // 初始化时间
    var now = new Date();
    var nowYear = now.getFullYear();
    var nowMonth = now.getMonth() + 1;
    var nowDate = now.getDate();
    showDateDom.attr('data-year', nowYear);
    showDateDom.attr('data-month', nowMonth);
    showDateDom.attr('data-date', nowDate);

    // 数据初始化
    function formatYear (nowYear) {
        var arr = [];
        for (var i = nowYear - 5; i <= nowYear + 5; i++) {
            arr.push({
                id: i + '',
                value: i + '年'
            });
        }
        return arr;
    }
    function formatMonth () {
        var arr = [];
        for (var i = 1; i <= 12; i++) {
            arr.push({
                id: i + '',
                value: i + '月'
            });
        }
        return arr;
    }
    function formatDate (count) {
        var arr = [];
        for (var i = 1; i <= count; i++) {
            arr.push({
                id: i + '',
                value: i + '日'
            });
        }
        return arr;
    }
    var yearData = function(callback) {
        // settimeout只是模拟异步请求，真实情况可以去掉
        // setTimeout(function() {
            callback(formatYear(nowYear))
        // }, 2000)
    }
    var monthData = function (year, callback) {
        // settimeout只是模拟异步请求，真实情况可以去掉
        // setTimeout(function() {
            callback(formatMonth());
        // }, 2000);
    };
    var dateData = function (year, month, callback) {
        // settimeout只是模拟异步请求，真实情况可以去掉
        // setTimeout(function() {
            if (/^(1|3|5|7|8|10|12)$/.test(month)) {
                callback(formatDate(31));
            }
            else if (/^(4|6|9|11)$/.test(month)) {
                callback(formatDate(30));
            }
            else if (/^2$/.test(month)) {
                if (year % 4 === 0 && year % 100 !==0 || year % 400 === 0) {
                    callback(formatDate(29));
                }
                else {
                    callback(formatDate(28));
                }
            }
            else {
                throw new Error('month is illegal');
            }
        // }, 2000);
        // ajax请求可以这样写
        /*
        $.ajax({
            type: 'get',
            url: '/example',
            success: function(data) {
                callback(data);
            }
        });
        */
    };
    selectDateDom.bind('click', function () {
        var oneLevelId = showDateDom.attr('data-year');
        var twoLevelId = showDateDom.attr('data-month');
        var threeLevelId = showDateDom.attr('data-date');
        var iosSelect = new IosSelect(3, 
            [yearData, monthData, dateData],
            {
                title: '请选择时间',
                itemHeight: 35,
                oneLevelId: oneLevelId,
                twoLevelId: twoLevelId,
                threeLevelId: threeLevelId,
                showLoading: true,
                callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
                    showDateDom.attr('data-year', selectOneObj.id);
                    showDateDom.attr('data-month', selectTwoObj.id);
                    showDateDom.attr('data-date', selectThreeObj.id);
                    showDateDom.html(parseInt(selectOneObj.value) + '-' + parseInt(selectTwoObj.value) + '-' +  parseInt(selectThreeObj.value)
                    );
                     vm.handler1 = showDateDom.text();

                }
        });
    });
}

$('.header_map_longevity').click(function(){
    history.go(-1);
});

$('.energetic1 li').click(function(){
    window.location.href = "tourItinerary.html";
});

  
})  
</script>
</html>
